<template>
  <div>
    <main-layout :searchWord="data.key" :flag="data.flag">
      <template #title>
        <i class="iconfont icon-jurassic_log"></i>
        <label class="main-layout-title">日志管理</label>
      </template>
      <template #operation></template>
      <template #search>
        <el-input
          v-model="data.key"
          style="width: 240px"
          placeholder="请输入"
          :prefix-icon="Search"
        />
      </template>
      <template #menu>
        <label style="font-size: 13px">显示：</label>
        <el-button :type="com.colours1" @click="loginLog">登录日志</el-button>
        <el-button :type="com.colours2" @click="mistakeLog">错误日志</el-button>
        <el-button :type="com.colours3" @click="behaviorLog"
          >行为日志</el-button
        >
      </template>
    </main-layout>
  </div>
</template>

<script setup lang="ts">
import MainLayout from "@/components/MainLayout.vue";
import { Search } from "@element-plus/icons-vue";
import { reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const data = reactive({
  key: "",
  flag: false,
});

const com = reactive({
  colours1: "",
  colours2: "",
  colours3: "",
});

//登录日志
const loginLog = () => {
  com.colours1 = "primary";
  com.colours2 = "";
  com.colours3 = "";
  router.push("/LogLayout/Log");
};

//错误日志
const mistakeLog = () => {
  com.colours1 = "";
  com.colours2 = "primary";
  com.colours3 = "";
  router.push("/LogLayout/mistake");
};

//行为日志
const behaviorLog = () => {
  com.colours1 = "";
  com.colours2 = "";
  com.colours3 = "primary";
  router.push("/LogLayout/behavior");
};

const colours = () => {
  if (route.path.toLowerCase().startsWith("/LogLayout/Log".toLowerCase())) {
    com.colours1 = "primary";
    com.colours2 = "";
    com.colours3 = "";
  } else if (
    route.path.toLowerCase().startsWith("/LogLayout/mistake".toLowerCase())
  ) {
    com.colours1 = "";
    com.colours2 = "primary";
    com.colours3 = "";
  } else if (
    route.path.toLowerCase().startsWith("/LogLayout/behavior".toLowerCase())
  ) {
    com.colours1 = "";
    com.colours2 = "";
    com.colours3 = "primary";
  }
};
// 初始加载
onMounted(() => {
  colours();
});
</script>

<style scoped>
.main-layout-title {
  font-size: 22px;
  margin: 24px 12px 12px 8px;
}
</style>
